<template>
  <div class="goods2-container">
    <!-- 商品列表2 -->
    <van-grid :border="false" :column-num="1" class="goods-list2">
      <van-grid-item v-for="item in goodslist" :key="item.id">
        <van-cell class="good-item" :class="setBC()">
          <van-image radius="10" :src="item.images" class="pic" slot="icon" />
          <van-tag
            color="#4a90e2"
            text-color="#ffffff"
            round
            class="tag"
            :class="setTC()"
            >{{ item.tag }}</van-tag
          >
          <div class="msg">
            <p class="tit">{{ item.name }}</p>
            <p class="text">{{ item.description }}</p>
          </div>
          <span class="price" :class="setFC()">￥{{ item.price }}</span>
          <span class="iconfont icon-Like"
            ><span class="like">{{ item.likenum }}</span></span
          >
        </van-cell>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'goodslist2',
  props: ['themetype', 'listtype'],//通过props接收父组件传来的参数
  // 定义属性
  data() {
    return {
      goodslist: [
        {
          id: 2,
          tag: '女士用',
          name: '概念笔记本',
          description: '我的生活故事书',
          price: 59.0,
          likenum: 998,
          images: require('@/assets/images/giftlist/gift2.png')
        },
        {
          id: 3,
          tag: '女士用',
          name: '简单典雅的手表',
          description: '时光流逝',
          price: 59.0,
          likenum: 228,
          images: require('@/assets/images/giftlist/gift3.png')
        },
        {
          id: 4,
          tag: '女士用',
          name: '经典的玻璃是一生的',
          description: '颜值与实用并重的台灯',
          price: 162.0,
          likenum: 333,
          images: require('@/assets/images/giftlist/gift4.png')
        },
        {
          id: 1,
          tag: '女士用',
          name: '米色陶瓷花瓶',
          description: '自然清新的意境',
          price: 59.0,
          likenum: 459,
          images: require('@/assets/images/giftlist/gift1.png')
        }
      ],
      list2: [
        {
          id: 5,
          tag: '耳环',
          name: '红玛瑙耳环',
          description: '妩媚风情',
          price: 49.0,
          likenum: 40,
          images: require('@/assets/images/accessorylist/accessory1.png')
        },
        {
          id: 6,
          tag: '项链',
          name: '爱之星',
          description: '爱你的光环',
          price: 120.0,
          likenum: 118,
          images: require('@/assets/images/accessorylist/accessory2.png')
        },
        {
          id: 7,
          tag: '项链',
          name: '天使之泪',
          description: '会有天使为我爱你',
          price: 228.0,
          likenum: 662,
          images: require('@/assets/images/accessorylist/accessory3.png')
        },
        {
          id: 8,
          tag: '吊坠',
          name: '月色琉璃',
          description: '颜值与实用并重的台灯',
          price: 162.0,
          likenum: 228,
          images: require('@/assets/images/accessorylist/accessory4.png')
        }
      ],
      list3: [
        {
          id: 9,
          tag: '指甲油',
          name: 'CHANEL',
          description: '保护你的手指',
          price: 229.0,
          likenum: 3560,
          images: require('@/assets/images/makeuplist/makeup1.png')
        },
        {
          id: 10,
          tag: '香水',
          name: '威尼斯之恋',
          description: '爱的滋味',
          price: 320.0,
          likenum: 1170,
          images: require('@/assets/images/makeuplist/makeup2.png')
        },
        {
          id: 11,
          tag: '乳化液',
          name: '像雪一样',
          description: '水和皮肤',
          price: 118.0,
          likenum: 892,
          images: require('@/assets/images/makeuplist/makeup3.png')
        },
        {
          id: 12,
          tag: '唇膏',
          name: '良好湿润性',
          description: '颜值与实用并重的唇膏',
          price: 78.0,
          likenum: 233,
          images: require('@/assets/images/makeuplist/makeup4.png')
        }
      ]
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //1.根据themetype动态设置样式
    // 1.1背景颜色
    setBC() {
      if (this.themetype === 2) {
        return 'setBC2'
      } else if (this.themetype === 3) {
        return 'setBC3'
      } else {
        return ''
      }
    },
    // 1.2标签颜色
    setTC() {
      if (this.themetype === 2) {
        return 'setTC2'
      } else if (this.themetype === 3) {
        return 'setTC3'
      } else {
        return ''
      }
    },
    // 1.3价格字体颜色
    setFC() {
      if (this.themetype === 2) {
        return 'setFC2'
      } else if (this.themetype === 3) {
        return 'setFC3'
      } else {
        return ''
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.themetype === 2) {
      this.goodslist = this.list2
    } else if (this.themetype === 3) {
      this.goodslist = this.list3
    } else if (this.themetype === 4) {
      this.goodslist = this.list2
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
//配饰颜色
.setBC2 {
  background-color: #f7f8ff !important;
}
.setTC2 {
  background-color: #6172e7 !important;
}
.setFC2 {
  color: #6172e7 !important;
}
//美妆颜色
.setBC3 {
  background-color: #fefafc !important;
}
.setTC3 {
  background-color: #e26593 !important;
}
.setFC3 {
  color: #e26593 !important;
}
// 页面样式
.goods2-container {
  overflow-y: auto; // 让其显示垂直滚动条
  height: 79vh; // 设置视口高度
  //   商品列表2
  .good-item {
    position: relative;
    box-sizing: border-box;
    background-color: #f7fbff;
    font-size: unset;
    padding: unset;
    width: 636px;
    height: 272px;
    .van-cell__value {
      position: unset;
    }
    //图片
    .pic {
      margin: 52px 0 0 22px;
      width: 170px;
      height: 170px;
    }
    // 标签
    .tag {
      margin: 64px 0 0 34px;
      padding-left: 25px;
      width: 126px;
      height: 40px;
    }
    // 商品信息
    .msg {
      margin-left: 34px;
      .tit {
        line-height: 40px;
        font-family: PingFang-SC-Medium;
        font-size: 24px !important;
        color: #313131;
        margin: unset;
      }
      .text {
        line-height: 30px;
        margin: unset;
        font-family: PingFang-SC-Medium;
        font-size: 20px;
        color: #aeaeae;
      }
    }
    .price {
      position: absolute;
      bottom: 45px;
      left: 220px;
      font-family: PingFang-SC-Heavy;
      font-size: 22px;
      color: #4da1dd;
    }
    .icon-Like {
      position: absolute;
      bottom: 45px;
      right: 50px;
      font-size: 24px;
      color: #a6a6b0;
      .like {
        margin-left: 4px;
        font-size: 20px !important;
      }
    }
  }
}
</style>
